<template>
    <el-card class="my-20px">
        <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
    </el-card>
    <el-card>
        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
            v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
            <template #settings>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="toDetail(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getPolicyList, getInsuranceCompany, getAddAndSubtractList } from '@/api/dashboard/longTerm.ts'
import { getEleRechargeDetails } from '@/api/dashboard/eleSign.ts'
import { getdepartmentapi } from '@/api/api.ts'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'
import { useRoute, useRouter } from 'vue-router'

import dayjs from 'dayjs'

const router = useRouter()
const startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
const endDate = dayjs().format('YYYY-MM-DD')
const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            },
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
        // isMonthMode: {
        //     name: '月单模式',
        //     prop: 'isMonthMode',
        //     value: '',
        //     placeholder: '请选择月单模式',
        //     type: 'select',
        //     // 0:灵活,1;月保单,2即时生效 null全部
        //     options: [
        //         {
        //             label: '灵活',
        //             value: 0
        //         },
        //         {
        //             label: '月保单',
        //             value: 1
        //         },
        //         {
        //             label: '即时生效',
        //             value: 2
        //         }
        //     ],
        //     defaultAttrs: {
        //         label: 'label',
        //         value: 'value'
        //     },
        //     handleFocus: (item) => {
        //     },
        //     handleChange: (item) => {
        //     }
        // },
        // insurCompanyType: {
        //     name: '保司',
        //     prop: 'insurCompanyType',
        //     value: '',
        //     placeholder: '请选择保司 ',
        //     type: 'select',
        //     options: [],
        //     defaultAttrs: {
        //         label: 'name',
        //         value: 'insurCompany'
        //     },
        //     handleFocus: (item) => {
        //         if (item.options.length) return
        //         getInsuranceCompany({}).then(res => {
        //             item.options = res
        //         })
        //     },
        //     handleChange: (item) => {
        //     }
        // },
        date: {
            name: '日期',
            prop: 'date',
            value: [startDate, endDate],
            initValue: [startDate, endDate],
            placeholder: '请选择日期',
            type: 'date',
            dateType: 'daterange',
            noClear: true,
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            }
        },
        searchText: {
            name: '搜索',
            prop: 'searchText',
            value: '',
            placeholder: '请输入客户名称/负责人',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '新增行业',
        //     click: () => {
        //         addType.value = 'add'
        //         showAdd.value = true
        //         curItem.value = {}
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
    },
    {
        label: '商务负责人',
        prop: 'legalPerson',
    },
    {
        label: '所属分组',
        prop: 'deptName',
    },
    {
        label: '充值金额',
        prop: 'payMoney',
        sortable: 'customer'
    },
    {
        label: '充值份数',
        prop: 'rechargeAmount',
    },
    {
        label: '充值时间',
        prop: 'createTime',
        sortable: 'customer'
    }
])

const tableData = ref([])

const sortField = ref('')
const sortOrder = ref('')

const sortMethod = (orderInfo) => {
    if (orderInfo.order) {
        const map = {
            ascending: 'ASC',
            descending: 'DESC'
        }
        sortField.value = orderInfo.prop,
            sortOrder.value = map[orderInfo.order]
    } else {
        sortField.value = null
        sortOrder.value = null
    }
    getData()
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const toDetail = (row) => {
    router.push({
        path: 'detailEleSign',
        query: {
            id: btoa(row.dealId),
            companyId: btoa(row.companyId)
        }
    })
}

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (filterData.value.list[key].prop === 'date') {
            query.startTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[0] : ''
            query.endTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[1] : ''
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const getData = () => {
    getEleRechargeDetails({
        ...createQuery(),
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
        sortField: sortField.value,
        sortType: sortOrder.value,
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

onMounted(() => {
    getData()
})

onActivated(() => {
    getData()
})
</script>
<style lang="scss" scoped></style>